﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<PaperSystem.Models.PaperUsed>" %>
<%@ Import Namespace="PaperSystem.Models" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>练习 - <%=Model.paperTitle %></title>
    <link type="text/css" href="/Content/common.css" rel="Stylesheet" />
    <style type="text/css">
        .page_center_inner{padding:14px 80px 0 14px;}
        
        
        .paper_container,
        .question_container{font-size:12px;font-family:"lucida Grande",Verdana;}
        
        /* paper_container */
        .paper_container{margin-top:10px;padding-bottom:10px;}
        .ex_q{padding:0 0 6px 0;margin-bottom:8px;background:#f9f9f9;
            border:1px solid #ddd;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
        }
        .paper_content .ex_q_type{font-size:14px;margin:0 0 0 4px;}
        .ex_q_hover{border-color:#bbb;}
        .q_in_q{*zoom:1;margin:0 4px;padding-top:4px;border-top:1px solid #ddd;}
        .q_ex_q{*zoom:1;margin:8px 4px 0;}
        .q_in_q:after,
        .q_ex_q:after{clear:both;content:"\20";display:block;height:0;}
        .q_left{float:left;width:92px;height:20px;line-height:20px;}
        .q_right{margin-left:100px;line-height:20px;}
        .answer_label{margin-right:8px;}
        .info{padding:10px 0 10px 4px;}
        .paper_content textarea {height:40px;line-height:20px;width:60%;}
        
        .begin_wrap{text-align:center;}
        .begin_wrap .begin_loader{width:32px;height:32px;margin:50px auto;background:url(/Content/images/ico_loading.gif) 0 0 no-repeat;}
        
    </style>
</head>
<body>

<div class="page_container">
	    <div class="page_left">
		    <div class="page_left_inner">
			    <h1 class="left_logo"><a href="#" class="logo" title="试题库系统">试题库系统</a></h1>
			    <%if (ViewData["userName"] != null){%>
			        <div class="left_message">欢迎您，<br/><%=ViewData["userName"]%>同学<br /><a href="/Login/Logout/" class="logout">退出</a></div>
			    <%} %>
			    <ul class="left_nav">
				    <li><a href="/Paper/ExamPaperList">考试</a></li>
				    <li class="current"><a href="/Paper/ExercisePaperList">练习</a></li>
			    </ul>
	            <%if(ViewData["isBegin"].Equals("true")){ %>
			        <div class="left_message">剩余时间<br /><span id="time_message">00&nbsp;:&nbsp;00</span></div>
	            <%} %>
		    </div>
	    </div>
	    <!-- end page_left -->
	    <div class="page_center">
		    <div class="page_center_inner">
		    <form id="begin_test_form" action="/Paper/ExerciseTimeBegin" method="post">
		        <input type="hidden" name="pid" value="<%=Model.pid %>" />
		    </form>
		    <form action="/Paper/ExercisePaperUpdate" method="post" id="paper_form">
			    <div class="tab_container">
			        <div class="tab_content">
				        <div class="tab_content_inner">
				            <input type="hidden" id="beginTime" name="answer.beginTime" value="<%= Html.Encode(Model.beginTime) %>" />
				            <input type="hidden" name="answer.pid" value="<%=Model.pid %>" />
				            <input type="hidden" name="answer.TorE" value="<%=Model.TorE%>" />
				            <input type="hidden" id="usedMinute" value="<%=Model.usedMinute %>"/>
				            <label>练习卷名称:</label><%=Model.paperTitle %>&nbsp;&nbsp;
				            <label>练习科目:</label><%=Model.course %>&nbsp;&nbsp;
				            <label>限时:</label><%=Model.usedMinute %>分钟
				        </div>
			        </div>
			    </div>
			    <!-- end tab_container -->
			    <!-- content begin here -->
	            <%if(ViewData["isBegin"].Equals("false")){ %>
	                <div class="begin_wrap">
	                    <div class="begin_loader"></div>
	                    <div>点击按钮开始练习：<a href="#" class="btn_blue btn_space" onclick="document.getElementById('begin_test_form').submit();">开始练习</a><a href="/Paper/ExercisePaperList" class="btn_gray">取消练习</a></div>
	                </div>
	            <%}else{ %>
			    <div class="paper_container" id="paper_container">
			        <div id="paper_content">
			             <% PaperObjectUsed[] paperObject = Model.paperObjectUsed as PaperObjectUsed[];
                            PaperInfoUsed[] paperInfo = Model.paperInfoUsed as PaperInfoUsed[];

                            int current_eid = -1;
                            int cnt_info = 0;
			                int cnt_obj = 0;         
			                bool is_first_obj = true;
                            foreach (var each_obj in paperObject)
                            {
                                //如果eid改变就
                                if (each_obj.eid != current_eid)
                                {
                                    current_eid = each_obj.eid;
                                    //如果不是第一个obj，且eid改变就输出大题的尾
                                    if (!is_first_obj)
                                    {
                                    %>
                                    </div> 
                                    <%
                                    }
                                    else
                                    {
                                        is_first_obj = false;
                                    }
                                    while (cnt_info < paperInfo.Length && (int.Parse(paperInfo[cnt_info].before) == each_obj.POorder))
                                    {
                                    %>
                                        <div class="paper_content info"><%=paperInfo[cnt_info].PIcontent%></div>
                                    <%
                                        cnt_info++;
                                    }
                                    //输出大题的头、大题的信息
                                    string content_title = "";
                                    switch (each_obj.type)
                                    {
                                        case "阅读理解": content_title = "文章："; break;
                                        case "完形填空": content_title = "文章："; break;
                                        case "翻译": content_title = "原文："; break;
                                        case "作文": content_title = "作文要求："; break;
                                        case "综合选择": content_title = "题目："; break;
                                        case "词语搭配": content_title = "题干："; break;
                                    }
                                    %>
                                        <div class="paper_content ex_q" data-eid="<%=each_obj.eid %>">
                                            <h3 class="ex_q_type"><%=each_obj.type %></h3>
                                            <div class="q_ex_q">
                                                <label class="q_left"><%=content_title %></label>
                                                <div class="q_right"><%=each_obj.content.ToString().Replace("\n", "<br/>")%></div>
                                            </div>
                                    <%
                                }
                                //输出小题的信息
                                %>
                                    <div class="q_in_q">
                                        <input type="hidden" class="Iorder replace_order" name="answer.paperAnswer[<%=cnt_obj %>].POorder" value="<%=each_obj.POorder %>">
                                        <label class="q_left"><%=each_obj.POorder %>.<%if (each_obj.Icontent != null) { %>题目：<%} %></label>
                                        <div class="q_right"><%if (each_obj.Icontent != null){ %><%=each_obj.Icontent%><%}else{%>&nbsp;<%} %></div>
                                        <label class="q_left">答案：</label>
                                        <%if (each_obj.answerMode.Equals("选择题")) { %>
                                            <%if (each_obj.isSingle == 1) { %>
                                                <div class="q_right">
                                                <%if(each_obj.option1 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="A"/>A</label>
                                                <%}if (each_obj.option2 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="B" />B</label>
                                                <%}if (each_obj.option3 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="C" />C</label>
                                                <%}if (each_obj.option4 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="D" />D</label>
                                                <%}if (each_obj.option5 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="E" />E</label>
                                                <%}if (each_obj.option6 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="F" />F</label>
                                                <%}if (each_obj.option7 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="G" />G</label>
                                                <%}if (each_obj.option8 != null){ %>
                                                    <label class="answer_label"><input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="H" />H</label>
                                                <%} %>
                                                (<%=each_obj.point%>分)
                                                </div>
                                            <%} else { %>
                                                <div class="q_right multi_answer_wrap">
                                                <input type="hidden" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="" class="multi_answer"/>
                                                <%if(each_obj.option1 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="A" />A</label>
                                                <%}if (each_obj.option2 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="B" />B</label>
                                                <%}if (each_obj.option3 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="C" />C</label>
                                                <%}if (each_obj.option4 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="D" />D</label>
                                                <%}if (each_obj.option5 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="E" />E</label>
                                                <%}if (each_obj.option6 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="F" />F</label>
                                                <%}if (each_obj.option7 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="G" />G</label>
                                                <%}if (each_obj.option8 != null){ %>
                                                    <label class="answer_label"><input type="checkbox" class="multi_answer_option" data-check="H" />H</label>
                                                <%} %>
                                                (<%=each_obj.point%>分)
                                                </div>
                                            <%} %>
                                        <%} else if (each_obj.answerMode.Equals("填空题")) { %>
                                            <div class="q_right"><input type="text" name="answer.paperAnswer[<%=cnt_obj%>].answer" class="data_confirm" data-confirm="required reHTML"/>(<%=each_obj.point%>分)</div>
                                        <%} else if (each_obj.answerMode.Equals("判断题")) { %>
                                            <div class="q_right"><label class="answer_label">正确<input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="T" /></label><label class="answer_label">错误<input type="radio" name="answer.paperAnswer[<%=cnt_obj%>].answer" value="F" /></label>(<%=each_obj.point%>分)</div>
                                        <%} else if (each_obj.answerMode.Equals("回答问题")) { %>
                                            <div class="q_right"><textarea cols="20" name="answer.paperAnswer[<%=cnt_obj%>].answer" class="data_confirm" data-confirm="required reHTML"></textarea>(<%=each_obj.point%>分)</div>
                                        <%} %>
                                        <% if (each_obj.option1 != null){ %>
                                            <label class="q_left choice_A">A:</label><div class="q_right choice_A"><%=each_obj.option1%></div>
                                        <%}if (each_obj.option2 != null){ %>
                                            <label class="q_left choice_B">B:</label><div class="q_right choice_B"><%=each_obj.option2%></div>
                                        <%}if (each_obj.option3 != null){ %>
                                            <label class="q_left choice_C">C:</label><div class="q_right choice_C"><%=each_obj.option3%></div>
                                        <%}if (each_obj.option4 != null){ %>
                                            <label class="q_left choice_D">D:</label><div class="q_right choice_D"><%=each_obj.option4%></div>
                                        <%}if (each_obj.option5 != null){ %>
                                            <label class="q_left choice_E">E:</label><div class="q_right choice_E"><%=each_obj.option5%></div>
                                        <%}if (each_obj.option6 != null){ %>
                                            <label class="q_left choice_F">F:</label><div class="q_right choice_F"><%=each_obj.option6%></div>
                                        <%}if (each_obj.option7 != null){ %>
                                            <label class="q_left choice_G">G:</label><div class="q_right choice_G"><%=each_obj.option7%></div>
                                        <%}if (each_obj.option8 != null){ %>
                                            <label class="q_left choice_H">H:</label><div class="q_right choice_H"><%=each_obj.option8%></div>
                                        <%} %>
                                        </div> 
                                <%
                                cnt_obj++;
                            }                  
			                //最后输出一个大题的尾部
                            %>
                            </div>   
                            <%
                            //如果还有信息没输出
                            while (cnt_info < paperInfo.Length)
                            {
                             %>
                             <div class="paper_content info"><%=paperInfo[cnt_info].PIcontent%></div>
                            <%
                                cnt_info++;
                            }
			             %>
			             
			        </div>
			        <div class="clearfix" style="margin-top:10px;">
			            <a href="#" class="btn_blue" id="submit_paper">提交答案</a>
			        </div>
			    </div>
			    <!-- end of paper_container -->
			    <div class="scroll_wrap">
			        <a href="#" class="up" title="滚动到顶部">UP</a>
			        <a href="#" class="down" title="滚动到底部">DOWN</a>
			    </div>
			    <%} %>
			    <input type="hidden" id="begin_message" value="<%=TempData["begin_message"] %>"/>
			    <!-- content end here -->
			</form>
		    </div>
	    </div>
	    <!-- end page_center -->
    </div>
<script type="text/javascript" src="/Scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/Scripts/common.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        /*
        * 定义一些函数
        */

        //滚动到顶部/底部
        $('.scroll_wrap').on('click', 'a', function() {
            if ($(this).hasClass('up')) {
                $('.page_center').animate({ scrollTop: 0 }, 200);
            } else {
                $('.page_center').animate({ scrollTop: $('.page_center_inner').height() }, 200);
            }
            return false;
        });

        /* ============ paper_container begin ============ */

        //鼠标移上
        $('#paper_content').on('mouseenter', '.ex_q', function() {
            $(this).addClass('ex_q_hover');
        })
        .on('mouseleave', '.ex_q', function() {
            $(this).removeClass('ex_q_hover');
        })

        function prepareAllAnswer() {
            //多选题要用jq来填答案
            var array_wrap = $('.multi_answer_wrap');
            array_wrap.each(function(index, elem) {
                var wrap = $(elem);
                var result_wrap = wrap.find('.multi_answer');
                var check_checkbox = wrap.find('.multi_answer_option:checked');
                var result = '';
                check_checkbox.each(function(ind, ele) {
                    result += $(ele).attr('data-check');
                });
                result_wrap.val(result);
            });
        }

        //计时函数
        var timeHandler = null;
        var timeLast = 0;
        function prepareCountDown() {
            try {
                var beginTime = new Date($('#beginTime').val());
                var nowTime = new Date();
                var timePast = parseInt((nowTime.getTime() - beginTime.getTime()) / 1000, 10);
                timeLast = $('#usedMinute').val() * 60 - timePast;
                return true;
            } catch (exp) {
                $('#time_message').parent().hide();
                return false;
            }
        }
        function countDown() {
            if ($('#time_message').length == 0) return false;
            if (timeHandler != null) clearTimeout(timeHandler);
            try {
                timeLast--;
                var minLast = Math.floor(timeLast / 60);
                var secLast = timeLast < 60 ? timeLast : timeLast % 60;
                minLast = minLast < 10 ? '0' + minLast : minLast;
                secLast = secLast < 10 ? '0' + secLast : secLast;
                $('#time_message').text(minLast + ' : ' + secLast);

                if (timeLast <= 0) {
                    $('#time_message').text('00 : 00');
                    message('练习结束，正在自动交提交', 'success', true, 5000);
                    prepareAllAnswer();
                    document.getElementById('paper_form').submit();
                } else {
                    timeHandler = setTimeout(arguments.callee, 1000);
                }
            } catch (exp) {
                $('#time_message').parent().hide();
            }
        }

        //开始计时
        prepareCountDown() && countDown();

        //完成试卷
        $('#submit_paper').on('click', function() {
            prepareAllAnswer();
            if (isInputOK(false)) {
                if (confirm('是否确认要提交？')) {
                    document.getElementById('paper_form').submit();
                }
            } else {
                if (confirm('当前还有题目没完成，是否确认要提交？')) {
                    document.getElementById('paper_form').submit();
                }
            }

        });
        /* ============ paper_container end ============ */
    });
</script>
</body>
</html>
